<template>
	<div class="row-item">
		<div class="title">
			<span>{{props.label}}</span>
		</div>
		<div class="vector-4d">
			<el-input-number v-model="top" class="i4" size="small" controls-position="right"  				
				:min="props.min"
				:max="props.max"
				:step="props.step" @change="onchange">
			</el-input-number>
			<el-input-number v-model="right" class="i4" size="small" controls-position="right"
				:min="props.min"
				:max="props.max"
				:step="props.step" @change="onchange">
			</el-input-number>
			<el-input-number v-model="bottom" class="i4" size="small" controls-position="right"
				:min="props.min"
				:max="props.max"
				:step="props.step" @change="onchange">
			</el-input-number>
			<el-input-number v-model="left" class="i4" size="small" controls-position="right"
				:min="props.min"
				:max="props.max"
				:step="props.step" @change="onchange">
			</el-input-number>
		</div>
	</div>
</template>


<script lang="ts" setup>
	const props=defineProps({
	  label:String,
	  pidentifier:String,
	  identifier:String,
	  value:String,
	  required:Boolean,
	  min:Number,
	  max:Number,
	  step:Number
	})
	
	const required=ref(false);
	const top=ref<number>(0);
	const right=ref<number>(0);
	const bottom=ref<number>(0);
	const left=ref<number>(0);
	
	watch(props,() => {
			parse(props.value);
		},
	    { immediate: true, deep: true },
	)

	function parse(v3:any) {
		if(v3){
			let v3r=v3.split(',');
			if(v3r && v3r.length>0){
				top.value=parseFloat(parseFloat(v3r[0]).toFixed(2));
			}
			if(v3r && v3r.length>1){
				right.value=parseFloat(parseFloat(v3r[1]).toFixed(2));
			}
			if(v3r && v3r.length>2){
				bottom.value=parseFloat(parseFloat(v3r[2]).toFixed(2));
			}
			if(v3r && v3r.length>3){
				left.value=parseFloat(parseFloat(v3r[3]).toFixed(2));
			}
		}else{
			top.value=0;right.value=0;bottom.value=0;left.value=0;
		}
	}

	const emits = defineEmits(['onchange'])
	const onchange=()=>{
		emits('onchange',{
			pidentifier:props.pidentifier,
			identifier:props.identifier,
			value:top.value+','+right.value+','+bottom.value+','+left.value
		})
	}
	defineExpose({
	});
</script>

<style scoped>
	:deep(.el-input-number__decrease) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	:deep(.el-input-number__increase) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
</style>